import {StyleSheet, Alert, Dimensions} from 'react-native';
import React, {useState, useEffect} from 'react';

import Icon from 'react-native-vector-icons/Ionicons';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

import About from '../About';
import User from '../User';
import Camera from '../Camera';

const Tab = createBottomTabNavigator();

function BottomTabs() {
  return (
    <Tab.Navigator
      screenOptions={{
        tabBarActiveTintColor: '#409eff',
        tabBarInactiveTintColor: '#303133',
        // tabBarShowLabel: false,
        headerShown: false,
        tabBarLabelStyle: {
          fontSize: 15,
        },
        tabBarStyle: {
          height: 60,
          paddingHorizontal: 5,
          paddingBottom: 3,
          backgroundColor: 'white',
          position: 'absolute',
          borderTopWidth: 0,
        },
      }}>
      <Tab.Screen
        name="About"
        component={About}
        options={{
          tabBarLabel: 'About',
          tabBarIcon: ({color, size}) => (
            <Icon name="film-outline" color={color} size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="User"
        component={User}
        options={{
          tabBarLabel: 'User',
          tabBarIcon: ({color, size}) => (
            <Icon name="tv-outline" color={color} size={30} />
          ),
        }}
      />
      <Tab.Screen
        name="Camera"
        component={Camera}
        options={{
          tabBarLabel: 'Camera',
          tabBarIcon: ({color, size}) => (
            <Icon name="tv-outline" color={color} size={30} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

export default function Home({navigation, route}) {
  console.log(navigation, route);

  return <BottomTabs />;
}
